<template name="GeneralThumbUp">
	<view class="component_container">
		<view class="before_operat" v-if="like_status.down == like_status.up">
			<view class="up" @click.stop="likeClick(0)">
				<text class="iconfont icon-up"></text>
				<text class="up_text">顶&nbsp; {{ likes }}</text>
			</view>
			<view class="hrs"></view>
			<view class="down" @click.stop="likeClick(1)"><text class="iconfont icon-down"></text></view>
		</view>
		<view class="after_operat" @click="likeClick(upOrDown(like_status))" v-if="like_status.down != like_status.up">
			<text :class="['iconfont', like_status.down ? 'icon-down' : 'icon-up']"></text>
			<text class="up_text">{{ like_status.down ? '已踩' : '已顶' }}&nbsp; {{ likes }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GeneralThumbUp',
	props: ['likes', 'like_status', 'index'],
	data() {
		return {};
	},
	onLoad() {
		console.log(this.likess);
	},
	methods: {
		upOrDown(status) {
			if (status.down != status.up) {
				if (status.down) {
					return 1;
				} else {
					return 0;
				}
			} else {
				return 0;
			}
		},
		likeClick(like_type) {
			if (this.index != undefined && this.index != null) {
				this.$emit('likeClick', like_type, this.index );
			} else {
				this.$emit('likeClick', like_type);
			}
		}
	}
};
</script>

<style lang="scss">
.component_container {
	height: 55rpx;
	border-radius: 50rpx;
	background-color: #139dfe;

	.after_operat {
		height: 100%;
		align-items: center;
		padding: 0 20rpx;

		.icon-up,
		.icon-down {
			font-size: 38rpx;
			font-weight: 600;
			color: white;
		}

		.up_text {
			font-size: 30rpx;
			color: white;
		}
	}

	.before_operat {
		height: 100%;
		align-items: center;

		.up {
			height: 100%;
			align-items: center;
			margin-left: 10rpx;

			.icon-up {
				font-size: 38rpx;
				font-weight: 600;
				color: white;
			}

			.up_text {
				font-size: 30rpx;
				color: white;
			}
		}

		.hrs {
			height: 55%;
			border-left: 1rpx #fff solid;
			margin: 0 10rpx;
		}

		.down {
			padding-right: 10rpx;
			align-items: center;
			justify-content: center;

			.icon-down {
				font-size: 38rpx;
				font-weight: 600;
				color: white;
			}
		}
	}
}
</style>
